<template>
  <div class="rate">
    <fx-card title="基础用法">
      <fx-rate v-model="baseRate"></fx-rate>
      评分:{{ baseRate }}
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义颜色">
      <div>
        <fx-rate v-model="colorRate1" color="#f60"></fx-rate>
      </div>
      <fx-rate v-model="colorRate2" :color="['#ed3c14','#ff9900','#67c23a','#2db7f5']"></fx-rate>
      <template #hide>
        <pre v-highlight="color"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义icon">
      <fx-rate v-model="iconRate">
        <i class="iconfont icon-heart-fill"/>
      </fx-rate>
      <template #hide>
        <pre v-highlight="icon"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义文字">
      <p>
        <fx-rate v-model="textRate" :text="['差','中','良','好','优']"></fx-rate>
      </p>
      <fx-rate v-model="textRate" :text="['差','中','良','好','优']"
               :color="['#ed3c14','#ff9900','#67c23a','#2db7f5']"></fx-rate>
      <template #hide>
        <pre v-highlight="text"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义步数">
      <p>
        <fx-rate v-model="stepRate1" class="fs20" :text="['差','中','良','好','优']"
                 :color="['#ed3c14','#ff9900','#f69','#2db7f5','#67c23a']" :step="0.1"></fx-rate>
        {{ stepRate1 }}
      </p>
      <fx-rate v-model="stepRate2" class="fs25" :step="0.2"></fx-rate>
      {{ stepRate2 }}
      <template #hide>
        <pre v-highlight="step"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="只读">
      <fx-rate :modelValue="2.7" readonly></fx-rate>
      2.7
      <template #hide>
        <pre v-highlight="readonly"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="API rate 属性">
      <fx-table :data="rateApi">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="type" label="类型"></fx-table-item>
        <fx-table-item prop="value" label="可选值"></fx-table-item>
        <fx-table-item prop="default" label="默认"></fx-table-item>
      </fx-table>
    </fx-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const rateApi = [
  { name: 'v-model / modelValue', directions: '绑定值', type: 'Number' },
  { name: 'text', directions: '将评分显示为文字，单独一个字将重复显示，可以数组形式单独定义每个字', type: 'String | String[]' },
  { name: 'step', directions: '评分间隔等级', type: 'Number', default: 1 },
  { name: 'color', directions: '评分颜色，可单个定义所有颜色，也可数组单独定义每个等级颜色', type: 'String | String[]', default: '#f7ba2a' },
  { name: 'readonly', directions: '仅读模式', type: 'Boolean', default: false }
]

const baseRate = ref<number>(1)
const colorRate1 = ref<number>(2)
const colorRate2 = ref<number>(3)
const textRate = ref<number>(1)
const iconRate = ref<number>(1)
const stepRate1 = ref<number>(2.5)
const stepRate2 = ref<number>(1.4)

const base = '<fx-rate v-model="baseRate"></fx-rate>评分:{{ baseRate }}'
const color = `<div>
  <fx-rate v-model="colorRate1" color="#f60"></fx-rate>
</div>
<fx-rate v-model="colorRate2" :color="['#ed3c14','#ff9900','#67c23a','#2db7f5']"></fx-rate>`
const text = `<p>
  <fx-rate v-model="textRate" :text="['差','中','良','好','优']"></fx-rate>
</p>
<fx-rate v-model="textRate" :text="['差','中','良','好','优']"
         :color="['#ed3c14','#ff9900','#67c23a','#2db7f5']"></fx-rate>`
const icon = `<fx-rate v-model="iconRate">
  <i class="iconfont icon-star"/>
</fx-rate>`
const step = `<p>
 <fx-rate v-model="stepRate1" class="fs20" :text="['差','中','良','好','优']"
 :color="['#ed3c14','#ff9900','#f69','#2db7f5','#67c23a']" :step="0.1"></fx-rate>
{{ stepRate1 }}
</p>
<fx-rate v-model="stepRate2" class="fs25" :step="0.2"></fx-rate>{{ stepRate2 }}`
const readonly = '<fx-rate :modelValue="2.7" readonly></fx-rate>'
</script>

<style scoped lang="scss">
.rate {

}
</style>
